<template>
  <v-layout>
    <template #header>
      <el-date-picker
        v-model="tableQuery.timeRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="getDiviverList"
      />
    </template>
    <v-table
      url="/divideOrder/getDivideOrderList"
      ref="tableRef"
      :query="tableQuery"
    >
      <v-column auto prop="scName" label="学校名称"></v-column>
      <v-column auto prop="code" label="分单编号"></v-column>
      <v-column auto label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="toOp(row)">详情</el-button>
        </template>
      </v-column>
    </v-table>
    <v-dialog v-model="detailVisible" title="详情" width="1000px">
      <el-table :data="detailList" style="width: 100%" height="550">
        <el-table-column prop="name" label="商品名称" width="150" />
        <el-table-column prop="format" label="规格" width="150" />
        <el-table-column prop="cunit" label="单位" width="120" />
        <el-table-column prop="price" label="价格" width="150" />
        <el-table-column prop="num" label="数量" width="150" />
        <el-table-column prop="vendorid" label="供应商" width="120" />
      </el-table>
    </v-dialog>
  </v-layout>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { queryDivideOrderList } from "@/api/user";
import type { divideDetailData } from "@/api/user/model";
import { markRaw, reactive, ref } from "vue";
const { tableRef, getSelectionRows, reload } = useTable();

interface Data {
  id: string;
  scName: string;
  shopId: string;
  code: string;
  status: string;
  fdUser: string;
  createTime: string;
}

const tableQuery = reactive({
  timeRange: "",
  status: 1,
  beginTime: "",
  endTime: "",
});

const getDiviverList = () => {
  tableQuery.beginTime = tableQuery.timeRange[0];
  tableQuery.endTime = tableQuery.timeRange[1];
  reload();
};
const detailVisible = ref(false);
const code = reactive({
  code: "",
});
const detailList = ref<divideDetailData[]>([]);
const toOp = (row: Data) => {
  detailVisible.value = true;
  code.code = row.code;
  queryDivideOrderList(code).then((data) => {
    detailList.value = data;
  });
};
</script>
